<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script src="index.js"></script>
</head>
<body>
  <div class="main">
    <!-- <svg id="svg" class="move-cursor-grab"><g ><path id="0" d="M196 25 L545.9999999999403 25 L335.99999999988063 375 L196 375 Z" style="fill:none;stroke-width:1;stroke:#000"></path><text transform="translate(196 20)" style="font-size: 8px;fill: #000">1</text><text transform="translate(545.9999999999403 20)" style="font-size: 8px;fill: #000">2</text><text transform="translate(335.99999999988063 370)" style="font-size: 8px;fill: #000">3</text><text transform="translate(196 370)" style="font-size: 8px;fill: #000">4</text></g></svg> -->
    <!-- <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="958" ><path d="M919.91771468 546.7657147l222.50057061 222.5005706c27.81257157 27.81257157 27.81257157 69.53142843 0 97.344-27.81257157 27.81257157-69.53142843 27.81257157-97.344 0L822.57371468 644.10971469l-222.50057156 222.50057061c-27.81257157 27.81257157-69.53142843 27.81257157-97.344 0s-27.81257157-69.53142843 0-97.344l222.50057156-222.50057061-222.50057156-222.50057156c-27.81257157-27.81257157-27.81257157-69.53142843 0-97.344s69.53142843-27.81257157 97.344 0L822.57371468 449.4217147l222.50057061-222.50057157c27.81257157-27.81257157 69.53142843-27.81257157 97.344 0s27.81257157 69.53142843 0 97.344l-222.50057061 222.50057156zM301.08799999 957.00114313c-13.90628531 0-34.7657147-6.95314313-48.672-20.85942843C134.21257155 824.89142844 57.72799999 658.016 57.72799999 491.14057157 57.72799999 317.312 127.25942842 164.34285687 252.41599999 46.13942844c27.81257157-27.81257157 69.53142843-27.81257157 97.344 0 27.81257157 27.81257157 27.81257157 69.53142843 0 97.344C252.41599999 233.8742853 196.79085686 359.03085687 196.79085686 491.14057157c0 125.15657156 55.62514313 257.26628531 152.96914313 347.65714313 27.81257157 27.81257157 27.81257157 69.53142843 0 97.34399999-13.90628531 13.90628531-27.81257157 20.85942843-48.672 20.85942844z m1049.92457156-6.95314313c-20.85942843 0-34.7657147-6.95314313-48.672-20.85942843-27.81257157-27.81257157-27.81257157-69.53142843 0-97.34400001 97.344-90.39085687 152.96914313-215.54742843 152.96914313-347.65714313s-55.62514313-250.31314313-152.96914313-333.75085686c-27.81257157-27.81257157-34.7657147-69.53142843-6.95314313-97.344 27.81257157-27.81257157 69.53142843-34.7657147 97.344-6.95314313C1517.88799999 157.38971469 1587.41942842 317.312 1587.41942842 491.14057157c0 173.82857157-69.53142843 326.79771469-194.688 445.00114312-6.95314313 6.95314313-27.81257157 13.90628531-41.71885687 13.90628531z" p-id="959"></path></svg> -->
    <!-- <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4955" ><path d="M512 0C229.5808 0 0 229.5808 0 512s229.5808 512 512 512 512-229.7856 512-512C1024 229.5808 794.4192 0 512 0z m279.3472 536.9856l-190.6688 190.6688c-6.7584 6.7584-15.5648 10.4448-24.9856 10.4448s-18.2272-3.6864-24.9856-10.4448c-6.7584-6.7584-10.4448-15.5648-10.4448-24.9856s3.6864-18.2272 10.4448-24.9856l130.2528-130.2528H257.8432c-19.6608 0-35.4304-15.9744-35.4304-35.4304 0-19.6608 15.9744-35.4304 35.4304-35.4304h422.912l-130.2528-130.2528c-6.7584-6.7584-10.4448-15.5648-10.4448-24.9856s3.6864-18.2272 10.4448-24.9856c6.7584-6.7584 15.5648-10.4448 24.9856-10.4448s18.2272 3.6864 24.9856 10.4448l190.8736 190.6688c6.7584 6.7584 10.4448 15.5648 10.4448 24.9856s-3.6864 18.2272-10.4448 24.9856z" fill="" p-id="4956"></path></svg> -->
    <!-- <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M188.353939 527.251394H362.123636v350.145939c0 38.058667 29.230545 69.026909 65.396364 69.026909h170.123636c36.057212 0 65.396364-30.859636 65.396364-69.042424V527.266909h172.559515c28.904727 0 44.06303-36.336485 24.358788-58.84897L536.358788 104.323879a32.147394 32.147394 0 0 0-48.841697 0L164.010667 468.402424c-19.595636 22.49697-4.545939 58.84897 24.358788 58.84897z" p-id="5219"></path></svg> -->
    <svg  id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="958"><path d="M512 272.8554671c-19.4965329 0-38.2165329 1.38666645-56.1877329 4.0213329-22.7413329 3.2725329-43.9296-11.78666678-47.34080033-33.6682671-3.43893322-21.88160033 12.2026671-42.29333355 34.944-45.56586645 22.04799967-3.2170671 44.928-4.90880032 68.58453323-4.90879935 171.0037329 0 295.776 88.74666645 375.6757329 173.33333257a742.0330671 742.0330671 0 0 1 111.98720032 155.19573323c2.496 4.7424 4.93653322 9.5125329 7.29386678 14.33813355l0.41600032 0.91520032 0.16639935 0.33279968v0.08320065l0.02773388 0.0277329-37.99466678 16.30719967 38.05013355 16.30720065-0.08320065 0.11093258-0.08319967 0.2218671-0.33279968 0.7210671a608.7466671 608.7466671 0 0 1-22.04800065 40.60159935 751.12959967 751.12959967 0 0 1-66.144 93.8218671 42.7093329 42.7093329 0 0 1-58.10133322 5.9904 39.07626645 39.07626645 0 0 1-7.0165329-55.85493323 669.31626645 669.31626645 0 0 0 69.3888-101.92000065 661.99466677 661.99466677 0 0 0-97.0666671-133.25866612C754.72213355 344.35199968 650.61119967 272.8554671 512 272.8554671z m457.59999967 280.41173258l37.99466678 16.30720065a38.82666645 38.82666645 0 0 0 0-32.61440033l-37.99466677 16.30719968zM195.09119967 363.40480032c8.18133322 7.15520033 13.03466677 17.13920032 13.56160066 27.73333291 0.4992 10.62186645-3.38346645 20.9941329-10.81600065 28.84266645a662.1888 662.1888 0 0 0-97.06666613 133.2864 662.38293322 662.38293322 0 0 0 97.06666613 133.2864C269.33333322 762.15466678 373.38880033 833.67893323 512 833.67893323a384.93866678 384.93866678 0 0 0 131.04-22.65813323c21.35466645-7.2106671 44.76159967 3.38346645 52.6933329 23.79519968 7.90400032 20.41173322-2.55146677 43.1530671-23.57333258 51.22346677A471.10613355 471.10613355 0 0 1 512 913.80053322c-171.0037329 0-295.776-88.74666645-375.6757329-173.33333355a741.89439967 741.89439967 0 0 1-111.98720032-155.19573322c-2.496-4.7146671-4.93653322-9.5125329-7.29386678-14.33813355l-0.41600032-0.91519935-0.16639935-0.33280065-0.02773388-0.0554658v-0.05546678l37.99466678-16.30720065L16.34986678 536.96l0.05546677-0.0277329 0.0277329-0.08320065 0.13866645-0.33279968 0.41600032-0.91520032 1.58079968-3.10613355c8.59733355-17.02826677 18.02666677-33.6682671 28.12160032-49.89226612a744.41813355 744.41813355 0 0 1 89.5786671-116.5354671 42.26559967 42.26559967 0 0 1 28.84266645-13.03466678c11.0101329-0.5269329 21.79839967 3.2170671 29.952 10.37226743zM54.40000033 553.26719968L16.40533355 536.96a38.82666645 38.82666645 0 0 0 0 32.61440033l37.99466677-16.30720065z" p-id="959"></path><path d="M470.87146678 368.2304c0-22.2144 18.52586678-40.24106678 41.37813322-40.24106678 124.91093355 0 223.50293355 101.78133322 223.50293355 224.16853388 0 14.36586645-7.90400032 27.65013322-20.6890671 34.86079935a42.432 42.432 0 0 1-41.40586612 0 40.04693355 40.04693355 0 0 1-20.6890671-34.86079935c0-80.8426671-64.47999967-143.68640032-140.71893323-143.68640032-22.85226645 0-41.37813322-18.02666677-41.37813322-40.24106678z m-127.65653355 104.3328c22.35306645 4.68693322 36.55253355 26.06933355 31.75466677 47.81226645a147.264 147.264 0 0 0-3.43893322 31.78240065c0 80.8426671 64.47999967 143.68640032 140.71893322 143.68639935 10.92693322 0 21.52106677-1.248 31.6714671-3.60533355 22.1866671-5.2416 44.56746645 8.04266678 49.92 29.6469342 5.40800032 21.60426645-8.2645329 43.34720032-30.47893387 48.56106645a223.33653322 223.33653322 0 0 1-51.11253323 5.82399967c-124.91093355 0-223.50293355-101.78133322-223.50293355-224.1685329 0-16.64000032 1.83039967-33.00266678 5.29706678-48.672 2.30186677-10.42773323 8.79146677-19.55199967 18.02666677-25.34826742 9.2074671-5.82399968 20.41173322-7.79306677 31.14453323-5.5466658v0.0277329zM110.50453355 121.32053323a42.23786678 42.23786678 0 0 1 58.51733355-1e-8L913.99466645 845.63200032c15.6970671 15.80799967 15.4752 40.9066671-0.4992 56.40960001a42.23786678 42.23786678 0 0 1-58.01813355 0.4992L110.50453355 178.22933323a39.4645329 39.4645329 0 0 1 0-56.90880001z" p-id="960"></path></svg>

    <div>
      <button onclick="gs.up()">上移</button>
      <button onclick="gs.down()">下移</button>
      <button onclick="gs.left()">左移</button>
      <button onclick="gs.right()">右移</button>
    </div>
    <div>
      <button onclick="gs.zoomIn()">放大</button>
      <button onclick="gs.zoomOut()">缩小</button>
    </div>
    <div>
      <button onclick="gs.rotate(-90)">向左旋转</button>
      <button onclick="gs.rotate()">向右旋转</button>
    </div>
    <div>
      <button onclick="gs.flipX()">水平翻转</button>
      <button onclick="gs.flipY()">垂直翻转</button>
    </div>
    <div>
      <button onclick="gs.reset()">居中</button>
      <button onclick="gs.save()">保存</button>
    </div>
    <input>
  </div>
  <script>
    var gs = new SvgAction(document.getElementById('svg'), {
      range: {
        min: 0.001, max: 100
      }
    });
  </script>

  <style>
    .main{
      height: 600px;
      width: 100%;
    }
    .main svg{
      border: 1px solid red;
      width: 600px;
      height: 600px;
    }
  </style>
</body>
</html>